スタイルシート例

PageSpinner スタイルシート例の目次

スタイルシートはたいていのブラウザでまだサポートされていないことに注意してください。
あなたの観客のすべてがスタイル対応のブラウザを使っていると思ってはいけません。 最新バージョンのNavigator と Exporer はスタイルシートをサポートしています。しかし、それらは CSS1 標準をそれぞれに異なったやり方で実装しており、CSS1 標準に記述されてる全てをサポートしているわけではありません。


スタイルシート例の HTML ファイルは、PageSpinner Examplesフォルダの中にある Style Sheet Examplesフォルダに置いてあります。Finderから PageSpinner を使ってファイルを開き、HTML ソースやStyle Sheet ファイル (.css) を表示し編集してください。

下記に示す例は、基本的には同じ内容の HTML ファイルです、しかし、それぞれに異なったスタイルシート定義ファイルを使用しているため、まったく異なった見掛けで表示されます。スタイルシートをサポートするブラウザが広く使われるようになると、スタイルシートは、サイトの外見をコントロールしたり容易に更新するのに強力なメカニズムであることがはっきりするでしょう。

PageSpinner でスタイルシートファイルをどのように使うか:

スタイルシートを使うには、Style Sheet Menu という名前の PageSpinner 拡張と、 "Style Sheets"フォルダをPageSpinner Extensions フォルダにインストールしなければなりません。そうしておけば、 Style Sheet メニューからヘルパーアプリケーション Style Sheet Assistant を起動できます。このアプリケーションには Style Sheet Reference も含まれています。

スタイルシートを使う HTML ファイル( .html)とスタイルシート定義ファイル( .css ) の両方を開きます。スタイルシート定義ファイルは、このパッケージに含まれている css ファイルをコピーして使うか新しい空ファイルを作成します。

Style Sheet Assistant を使うか、Tagsメニューにある Style Sheet 項目を選択して、スタイル定義を CSS 文書に追加します。

スタイルシートを HTML ファイルに貼り付けるには、挿入ポイントを HTML 文書のHEAD セクションに置いて、Tagsメニューから Style Sheet : Link to Style Sheet Fileを選択します。以下のようなタグが挿入されます:

<LINK REL=STYLESHEET HREF="enter_filname_here.css" TYPE="text/css">

HREF アトリビュートに書かれているファイル名をあなたが使用する CSS ファイルの名前に変更します。この時点で、CSS ファイルを編集し変更を保存しておくことができます。 それから HTML ファイルに切り換えて、プレビューボタンをクリックしあなたのブラウザでスタイルの付けられたページを表示します。

チップス: HTML ページが Navigator 4.0 の最前面のページに表示されたら、あなたは対応する CSS ファイルを編集し変更を保存した後、ブラウザに切り換えて、ブラウザの リロードボタンを押し、スタイルを変更したページをプレビューできます。 このやり方は、File : Preferences : General.で"Autosave before preview"のボックスをチェックしておくと、とてもうまくゆきます。
例その 1
たくさんのカラーとスタイル − sheet1.cssファイルによるスタイル定義

例その 2
ヘッダタグの間に余分のスペース − sheet2.cssファイルによるスタイル定義

例その 3
右寄せされた配置のテキスト − sheet3.cssファイルによるスタイル定義

- 見本例の目次 -